<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title></title>
    <link rel="stylesheet" href="preview/css/reset.css"/>
    <style>
        .comeContent{
            width: 10.8rem;
            background-color: #ccc;
        }
    </style>
</head>
<body>
<div class="comeContent fl">
    <div id="barTwo" style="width: 100%;height: 4.3rem;"></div>
</div>
</body>
<script src="preview/js/jquery-3.2.1.min.js"></script>
<script src="preview/js/echarts.min.js"></script>
<script>
    var barTwo,barTwoChart,timeTicket=null,currentSize;
    function getRem(prem,pwidth){
        var html = document.getElementsByTagName("html")[0];
        var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
        html.style.fontSize = oWidth/pwidth*prem + "px";
        return oWidth/pwidth*prem;
    }
    function randomData() {
        now = new Date(+now + oneDay);
        value = value + Math.random() * 21 - 10;
        return {
            name: now.toString(),
            value: [
                [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                Math.round(value)
            ]
        }
    }
    var data = [];
    var now = +new Date(1997, 9, 3);
    var oneDay = 24 * 3600 * 1000;
    var value = Math.random() * 1000;
    for (var i = 0; i < 23; i++) {
        data.push(1000);
    }
    var xData=['平桥乡', '分路口镇', '苏埠镇', '南楼村农家书屋', '单王乡', '韩摆渡镇', '独山镇', '江家店镇', '青山乡', '狮子岗乡','顺河镇','罗集乡','石板冲乡','固镇镇','石婆店镇','新安镇','西市街道','城南镇','西河口乡','丁集镇','鼓楼街道','徐集镇','小华山街道'];




   function createCanvas(){

        barTwo = {
//            title: {
//                text: '动态数据 + 时间坐标轴'
//            },
//            tooltip: {
//                trigger: 'axis',
//                formatter: function (params) {
//                    params = params[0];
//                    var date = new Date(params.name);
//                    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
//                },
//                axisPointer: {
//                    animation: false
//                }
//            },
            grid:{
                y:"10%",
                y2:"14%",
                x2:"0%",
                x1:"2%"
            },

            xAxis: {
                type: 'category',
                data:xData,
                axisTick: {
                    show: false////控制去掉刻度线
                },
                axisLine:{show:true,symbol:['none','arrow'],lineStyle:{color:"#fff"}},///控制坐标轴线的颜色
                axisLabel : {
                    show:true,
                    interval:0,
                    rotate:45,
                    textStyle: {
                        color:'#1981ff',////控制坐标轴字体的颜色
                        fontSize:16*currentSize/100
                    },
                },
                splitLine:{
                    show: true,
                    lineStyle:{
                        color: '#1e3d64'
                    }
                },//网格线
                splitArea : {show : false},//网格区域

            },
            yAxis: {
                type: 'value',
                axisTick: {
                    show: false////控制去掉刻度线
                },
                axisLine:{show:true,symbol:['none','arrow'],lineStyle:{color:"#fff"}},///控制坐标轴线的颜色
                axisLabel : {
                    show:true,
                    formatter: '{value}',
                    textStyle: {
                        color:'#1981ff',////控制坐标轴字体的颜色
                        fontSize:16*currentSize/100
                    }
                },
                splitLine:{
                    show: true,
                    lineStyle:{
                        color: '#1e3d64'
                    }
                },//网格线
                splitArea : {show : false}//网格区域
            },
            series: [{
                name: '模拟数据',
                type: 'bar',
                showSymbol: false,
                barWidth:9,
                itemStyle: {////设置柱状的颜色和label显示
                    normal: {
                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: "#2075da",
                        barBorderRadius:[2, 2, 2, 2],///设置柱状的圆角
                        //color:function(params) {////设置每个柱子的颜色不同
                        //    // build a color map as your need.
                        //    var colorList = [
                        //        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                        //        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                        //        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                        //    ];
                        //    return colorList[params.dataIndex]
                        //},

                        label: {//以下为是否显示，显示位置和显示格式的设置了
                            show: true,
                            position: 'top',
                            fontSize:16*currentSize/100,
                            formatter: '{c}',
//                            formatter: '{b}\n{c}'
                            textStyle:{
                                fontSize:16*currentSize/100,
                                color:"#1981ff"
                            }

                        }
                    }
                },
                hoverAnimation: false,
                data: data
            }]
        };


        barTwoChart = echarts.init(document.getElementById('barTwo'));
        barTwoChart.setOption(barTwo);

    }
    function move(){
        setInterval(function () {
//            data.shift();
//            data.push(randomData());

            data.push(data.shift());
            xData.push(xData.shift());

            barTwoChart.setOption({
                    xAxis: {
                        data:xData
                    },
                    series: [{
                        data: data
                    }]
            });
        }, 5000);

    }
    window.onresize = function(){
        currentSize=getRem(100,1080);
        createCanvas();
        barTwoChart.resize();
        move();
    };
    window.onload = function(){
        currentSize=getRem(100,1080);
        createCanvas();
        move();
    };

</script>

</html>